<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="view">显示</button>
		<button id="hide">隐藏</button>
		<button id="toggle">切换</button>
		<p>111111</p>
		
		<button id="fadeIn">淡入</button>
		<button id="fadeOut">淡出</button>
		<button id="fadetoggle">淡入淡出</button>
		<div class="222" style= "background-color:red ;width: 300px; height: 100px;"></div>
			
			<button id="slideUp">上移</button>
			<button id="slideDown">下移</button>
			<button id="slideToggle">上下移</button>
			<div class="111" style="background-color:red ;width: 300px; height: 100px;"></div>
		 <div> 
		  <button id="fadeIn1">淡入1</button>
		<button id="fadeOut2">淡出2</button>
		<button id="fadetoggle3">淡入淡出3</button>
		<button id="stop">停止</button>
		<img src="img/1.jpg" flag="1"/>
		</div>
		
			 <div id="top" style="width: 200px;height: 200px; background-color: pink;">点我伸缩</div>
		 	<div id="content" style="width: 100px; height: 150px; background-color: cadetblue;">111111</div>
		 	
		 	
		 		<button id="animateBtn">点我动起来</button>
		 		<div id="anmiate" style="position: relative; background-color: yellow; width: 200px; height: 200px;">
		 			
		 		</div>
		 
		<script src="layui/css/jquery-1.11.3.min.js"></script>
		<script type="text/javascript">
			//隐藏
			$("#hide").click(function(){
				$("p").hide(1000);
			});
			//显示
			$("#view").click(function(){
				$("p").show(1000);
			});
			//切换
			$("#toggle").click(function(){
				$("p").toggle();
			});
			
		$("#fadeIn").click(function(){
				$(".222").fadeIn();
			});
		$("#fadeOut").click(function(){
				$(".222").fadeOut(1000);
			});
		$("#fadetoggle").click(function(){
				$(".222").fadetoggle(1000);
			});
			
			$("#slideUp").click(function(){
				$(".111").slideUp(1000)
			});
			$("#slideDown").click(function(){
				$(".111").slideDown(1000)
			});
			$("#slideToggle").click(function(){
				$(".111").slideToggle(1000)
			});
			
			$("#fadeIn1").click(function(){
				$("img").fadeIn(500);
			});
			var img=["img/1.jpg","img/2.jpg","img/3.jpg"];
			var i=0;
			$("#fadeOut2").click(function(){
				if(i==2){
					i=0;
				}else{
					i++;
				}
			$("img").fadeOut(500,function(){
				$("img").attr("src",img[i]);
				$("img").fadeIn(500);
			});
			});
			
			function toggle(){
				var flag=$("img").attr("flag");
				flag++;
				$("img").attr("flag",flag);
				$("img").fadeToggle(500,function(){
					if(flag %2==0){
						if(i==2) {
							i=0
						}else{
							i++;
						}
						}
						$("img").attr("src",img[i]);
				});		
			}
			var index;
			$("#fadetoggle3").click(function(){
				 index=window.setInterval('toggle()',500);
					
				});
			
			$("#stop").click(function(){
				console.log(index);	
				window.clearInterval(index);
				$("img").stop();
			});
			$("#top").click(function(){
				$("#content").slideToggle();
			});
			
			$("#animateBtn").click(function(){
				$("#anmiate").animate({
					top:'200px',
					width:'100px',
					heiht:'100px'
				},1000);
			});
			
		</script>
	</body>
</html>
